<template>
	<transition name="acf-load">
		<div v-show="visible" class="acf-load">
			<div class="acf-load-body">
				<h2 class="acf-load-header">装载资源</h2>
				
				<div class="acf-load-file">
					<h2 class="acf-load-label">
						音频
						<el-button type="primary" round size="small" @click="selectFile('audio')">
							<el-icon><CirclePlusFilled /></el-icon>
						</el-button>
					</h2>
					<el-progress
						:text-inside="true"
						:stroke-width="26" 
						:percentage="audioSource.percentage"
						:format="percentage  => `${audioSource.name} ${percentage}%`"
						:color="audioSource.status == 'success' ? '#67c23a' : audioSource.status == 'error' ? '#f56c6c' : '#409eff'"
					/>
				</div>
				
				<div class="acf-load-file">
					<h2 class="acf-load-label">
						图片
						<el-button type="primary" round size="small" @click="selectFile('img')">
							<el-icon><CirclePlusFilled /></el-icon>
						</el-button>
					</h2>
					<el-progress
						:text-inside="true"
						:stroke-width="26" 
						:percentage="imgSource.percentage"
						:format="percentage  => `${imgSource.name} ${percentage}%`"
						:color="imgSource.status == 'success' ? '#67c23a' : imgSource.status == 'error' ? '#f56c6c' : '#409eff'"
					/>
				</div>
				
				<div class="acf-load-footer">
					<el-button @click="enterNext" type="primary">开始</el-button>
				</div>
				<input ref="fileElement" type="file" @change="fileChange" style="display: none;" />
			</div>
		</div>
	</transition>
</template>

<script setup>
	
	import { ref, reactive, watch } from 'vue';
	import useSourceStore from './useSourceStore';
	import * as axreq from '@/api/request';
	
	const emits = defineEmits(['next']);
	
	const sourceStore = useSourceStore();
	
	const fileElement = ref();
	
	const visible = ref(true);
	const selectType = ref();
	
	const imgSource = reactive({
		status: 'wait',
		percentage: 0,
		name: ''
	})
	
	const audioSource = reactive({
		status: 'wait',
		percentage: 0,
		name: ''
	})
	
	function enterNext() {
		visible.value = false;
		emits('next');
	}
	
	function selectFile(type) {
		selectType.value = type;
		fileElement.value.click();
	}
	
	function fileChange(e) {
		const file = e.target.files[0];
		const locateUrl = URL.createObjectURL(file);
		if (selectType.value === 'audio') {
			audioSource.name = file.name;
			sourceStore.audioName = file.name.slice(0, file.name.lastIndexOf('.'));
			load(locateUrl, audioSource).then(url => {
				sourceStore.audioUrl = url;
				URL.revokeObjectURL(locateUrl);
			})
		} else {
			imgSource.name = file.name;
			sourceStore.imgName = file.name.slice(0, file.name.lastIndexOf('.'));
			load(locateUrl, imgSource).then(url => {
				sourceStore.imgUrl = url;
				URL.revokeObjectURL(locateUrl);
			})
		}
	}
	
	function load(url, source) {
		source.status = 'loading';
		return axreq._get_(url, null, {
			baseURL: null,
			responseType: 'blob',
			onDownloadProgress: function(progressEvent) {
				source.percentage = Math.round(progressEvent.loaded * 100 / progressEvent.total);
			}
		}).then(({ data }) => {
			source.percentage = 100;
			source.status = 'success';
			return URL.createObjectURL(new Blob([data]));
		}).catch(() => {
			source.status = 'error';
		})
	}
	
</script>

<style lang="scss" scoped>
	
	@import './mixin.scss';
	
	.acf-load {
		@include acfFullOverlayer;
		z-index: 5;
	}
	
	.acf-load-enter-from,
	.acf-load-leave-to {
		opacity: 0;
	}
	
	.acf-load-body {
		width: clamp(240px, 80vw, 500px);
		margin: 50vh auto 0;
		transform: translateY(-50%);
	}
	
	.acf-load-header {
		margin-bottom: 40px;
		font-size: 28px;
	}
	
	.acf-load-footer {
		text-align: right;
		margin-top: 40px;
	}
	
	.acf-load-file {
		& + & {
			margin-top: 20px;
		}
	}
	
	.acf-load-label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	
</style>